<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理的基本使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        总结:
            事件的基本使用:
                1.使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名
                2.事件的回调需要配置在VM的methods对象中，最终会在vm上；
                3.methods中配置的函数，不要使用箭头函数，否者this会是windows   =>   箭头函数找爸爸
                4.methods中配置的函数，都是被Vue所管理的对象，this指向的是vm或 组件实例对象
                5.@click="demo"  和 @click="demo($event)"的效果是一样的，但是后者可以传参
    -->
            <!-- 准备好一个容器 -->
    <div id="root">
        <h1>欢迎来到bilibili学习</h1>
        <button v-on:click="showInfo">点我提示信息(不传参)</button>
        <!-- <button @click="showInfo">点我提示信息</button>  v-on:click="xxx"  =>简写 @click="xxx" -->
        <button v-on:click="showInfo2(66,$event)">点我提示信息(传参)</button>
        <!-- 上方 $event  表示传参的时候需要传参 event参数 
            click原生绑定方法均会带入一个参数，参数为event，而event.target则表示按钮的Dom对象 
        -->
    </div>

    <script>

        const vm = new Vue({
            el:'#root',
            methods: {
                showInfo(event){
                    alert('提示信息~')
                    console.log(event.target.innerText)
                    console.log(this)     //如果使用的是箭头函数，this表示的是windows
                },
                showInfo2(val,event){
                    alert(val)
                    console.log(event.target.innerText)
                    console.log(this)     //如果使用的是箭头函数，this表示的是windows
                }
                //注:这里的methods方法也可以放到data里面，但是如果放到data里面会将data中的方法进行
                    //数据劫持和数据代理，没有必要，耗性能
            },
        })
        




    </script>
    
</body>
</html>